<template>
	<div class="es-block">
		<div
			class="alarm-stats"
			@mouseover="handleMouseOver"
			@mouseout="handleMouseOut"
		>
			<div class="box" title="检测报警统计">
				<div class="main">
					<div class="list-wrap" ref="scrollContainer">
						<ul class="list">
							<!-- 添加额外的数据副本 -->
							<li
								class="item"
								v-for="(alarm, index) in extendedAlarmData"
								:key="index"
							>
								<div class="triangle"></div>
								<div class="date">{{ alarm.date }} |</div>
								<div class="time-wrap">
									<p class="key">{{ alarm.time }}</p>
									<div class="val-wrap">
										<span class="sign">报警次数:</span>
										<p :class="['val', { yellow: alarm.isCritical }]">
											{{ alarm.count }}<span class="unit">次</span>
										</p>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from "vue";

const scrollContainer = ref<HTMLDivElement | null>(null);
const scrollTimer = ref<NodeJS.Timeout | null>(null);
const isScrolling = ref(false);

const alarmData = ref([
	{
		date: "2024-10-10",
		time: "上午",
		count: 3,
		isCritical: false,
	},
	{
		date: "2024-10-10",
		time: "下午",
		count: 1,
		isCritical: false,
	},
	{
		date: "2024-10-11",
		time: "上午",
		count: 2,
		isCritical: false,
	},
	{
		date: "2024-10-11",
		time: "下午",
		count: 5,
		isCritical: true,
	},
	{
		date: "2024-10-12",
		time: "上午",
		count: 4,
		isCritical: false,
	},
	{
		date: "2024-10-12",
		time: "下午",
		count: 2,
		isCritical: false,
	},
	{
		date: "2024-10-13",
		time: "上午",
		count: 1,
		isCritical: true,
	},
	{
		date: "2024-10-13",
		time: "下午",
		count: 3,
		isCritical: false,
	},
	{
		date: "2024-10-14",
		time: "上午",
		count: 5,
		isCritical: true,
	},
	{
		date: "2024-10-14",
		time: "下午",
		count: 4,
		isCritical: false,
	},
]);

const extendedAlarmData = computed(() => {
	const extendedData = [...alarmData.value, ...alarmData.value];
	return extendedData;
});

function startAutoScroll() {
	if (!isScrolling.value && scrollTimer.value === null) {
		scrollTimer.value = setInterval(() => {
			if (scrollContainer.value) {
				scrollContainer.value.scrollLeft += 1; // 调整滚动速度
			}
		}, 20); // 调整滚动间隔时间
	}
}

function stopAutoScroll() {
	if (scrollTimer.value !== null) {
		clearInterval(scrollTimer.value);
		scrollTimer.value = null;
	}
}

function handleMouseOver() {
	stopAutoScroll();
}

function handleMouseOut() {
	startAutoScroll();
}

onMounted(() => {
	if (scrollContainer.value) {
		startAutoScroll();
		scrollContainer.value.addEventListener("mouseover", handleMouseOver);
		scrollContainer.value.addEventListener("mouseout", handleMouseOut);
	}
});

onUnmounted(() => {
	if (scrollContainer.value) {
		stopAutoScroll();
		scrollContainer.value.removeEventListener("mouseover", handleMouseOver);
		scrollContainer.value.removeEventListener("mouseout", handleMouseOut);
	}
});
</script>
<style scoped lang="scss">
.es-block {
	width: 100%;
	height: 100%;
}

.alarm-stats {
	position: relative;
	width: 100%;
	height: 100%;
	.box {
		display: block;
		position: relative;
		h1 {
			position: absolute;
			top: 0;
			left: 0;
			padding: 10px;
			background: rgba(0, 0, 0, 0.5);
			color: #fff;
			z-index: 1;
		}
	}
	.main {
		height: 458px;
		padding: 20px;
		overflow: hidden;
		.list-wrap {
			height: 411px;
			overflow-x: auto; // 允许水平滚动
			overflow-y: hidden;
			white-space: nowrap; // 使列表项在同一行显示
			.item {
				display: inline-block; // 使列表项成为内联块级元素
				height: 76px;
				background: rgba(37, 186, 222, 0.1);
				border-bottom: 1px solid #25bade;
				margin-bottom: 8px;
				color: #fff;
				padding-left: 27px;
				padding-right: 27px;
				display: flex;
				flex-direction: row;
				align-items: center;
				position: relative;
				.triangle {
					width: 10px;
					height: 10px;
					background: url("~@/assets/waterLevel/矩形6.png") no-repeat center
						center;
					background-size: 100% 100%;
				}

				.date {
					font-family: D-DIN-PRO;
					font-size: 18px;
					color: #dafdff;
					margin-right: 10px;
				}
				.time-wrap {
					display: flex;
					justify-content: space-between;
					align-items: center;
					p {
						margin: 0;
					}
					.key {
						font-family: D-DIN-PRO;
						font-size: 24px;
						color: #dafdff;
					}
					.val-wrap {
						display: flex;
						align-items: center;
						.sign {
							font-family: Microsoft YaHei;
							font-size: 20px;
							color: #dafdff;
							margin-right: 10px;
						}
						.val {
							font-family: D-DIN-PRO;
							font-weight: bold;
							font-size: 30px;
							color: #49efff;
							.unit {
								font-size: 18px;
								color: #49efff;
								margin-left: 2px;
								font-weight: normal;
							}
						}
						.yellow {
							color: #dafdff;
							background: linear-gradient(0deg, #ffffff 0%, #ffe8a1 100%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}
					}
				}
			}
		}
	}
}

/* 设置滚动条样式 */
::-webkit-scrollbar {
	width: 4px; /* 设置滚动条宽度 */
}

::-webkit-scrollbar-thumb {
	background: #ccc; // 滑块颜色
	border-radius: 6px; /* 设置滚动条滑块圆角 */
}
</style>
